<template>
  <div class="box">
    <p class="p_title">
      <el-button type="text" style="color: #000;font-size: 16px">用户信息</el-button>
    </p>
    <el-form :model="addUnitForm" :rules="rules" ref="addUnitForm" label-width="130px" disabled>
      <el-form-item label="身份证号" prop="sid" class="el_w">
        <el-input v-model="addUnitForm.sid"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="displayname" class="el_w">
        <el-input v-model="addUnitForm.displayname"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="account" class="el_w">
        <el-input v-model="addUnitForm.account"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex" class="el_w">
        <el-select v-model="addUnitForm.sex" placeholder="请输入性别" style="width: 100%">
          <el-option
            v-for="item in sexBox"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description" class="el_w">
        <el-input v-model="addUnitForm.description"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" class="el_w">
        <el-input v-model="addUnitForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" class="el_w">
        <el-input v-model="addUnitForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status" class="el_w">
        <el-select v-model="addUnitForm.status" placeholder="请选择状态" style="width: 100%">
          <el-option
            v-for="item in statusBox"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p class="p_title">
      <el-button type="text" style="color: #000;font-size: 16px">用户权限</el-button>
    </p>
    <table style="width: 100%;margin: 0 015px 0;" class="personalTable" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td>系统管理权限</td>
        <td colspan="11">
          <span class="span" v-for="item in dirRightList">{{item.name}}</span>
          <span class="span1" v-if="!dirRightList.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>项目报建权限</td>
        <td colspan="11">
          <span class="span" v-for="item in Box1">{{item.name}}</span>
          <span class="span1" v-if="!Box1.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>设计方案权限</td>
        <span class="span" v-for="item in Box2">{{item.name}}</span>
        <span class="span1" v-if="!Box2.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>施工许可权限</td>
        <span class="span" v-for="item in Box3">{{item.name}}</span>
        <span class="span1" v-if="!Box3.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收权限</td>
        <span class="span" v-for="item in Box4">{{item.name}}</span>
        <span class="span1" v-if="!Box4.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>咨询服务权限</td>
        <span class="span" v-for="item in Box5">{{item.name}}</span>
        <span class="span1" v-if="!Box5.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>掘占路等咨询</td>
        <span class="span" v-for="item in Box6">{{item.name}}</span>
        <span class="span1" v-if="!Box6.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收提前查看</td>
        <span class="span" v-for="item in Box7">{{item.name}}</span>
        <span class="span1" v-if="!Box7.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>事中事后监管权限</td>
        <span class="span" v-for="item in Box8">{{item.name}}</span>
        <span class="span1" v-if="!Box8.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>掘占路等许可权限</td>
        <span class="span" v-for="item in Box9">{{item.name}}</span>
        <span class="span1" v-if="!Box9.length">{{'暂无数据'}}</span>
      </tr>
    </table>
  </div>
</template>

<script>
  import {http} from "../../../assets/commonjs/axios";
  import {$aos} from "../../../store/state";
  import {delSurplus} from "../../../assets/commonjs/utils";
  import ElSlPanel from "element-ui/packages/color-picker/src/components/sv-panel";

  export default {
    name: "seeUser",
    components: {ElSlPanel},
    data() {
      return {
        orgname: '',
        sexBox: [   //性别的下拉框数据
          {id: "男", value: "男"},
          {id: "女", value: "女"},
        ],
        statusBox: [///状态的下拉框数据
          {value: 0, label: "无效"},
          {value: 1, label: "有效"},
          {value: 2, label: "有效"},
        ],
        addUnitForm: {
          sid: '',//身份证号
          displayname: '',//姓名
          account: '',//账号
          sex: "",//性别
          description: "",//描述
          email: "",//邮箱,
          phone: "",//手机号
          status: "",//状态
        },
        UnitForm: {
          applyType: 4,//1：新建 2.编辑 3.删除 4 预览
          uid: '',
          urId: ''
        },
        rules: {
          sid: [
            {required: true, message: "请填写身份证号", trigger: "blur"}
          ],
          displayname: [
            {required: true, message: "请填写姓名", trigger: "blur"}
          ],
          account: [
            {required: true, message: "请填写账号", trigger: "blur"}
          ],
          sex: [
            {required: true, message: "请选择性别", trigger: "blur"}
          ],
          phone: [
            {required: true, message: "请填写手机号", trigger: "blur"}
          ],
        },
        dirRightList: [],
        Box1: [],
        Box2: [],
        Box3: [],
        Box4: [],
        Box5: [],
        Box6: [],
        Box7: [],
        Box8: [],
        Box9: [],
      }
    },
    created() {
      $aos.getItem('loginData').then(res => {
        this.orgname = res.org.orgname;
      })
      $aos.getItem('userData').then(res => {
        this.UnitForm.uid = res.uid;
        this.UnitForm.urId = res.urId;
        this.submitAddUnit();
      })

    },
    methods: {
      submitAddUnit() {
        http('post', 'permission/opera_user', {
          user: this.UnitForm
        }).then(res => {
          if (res.data.success) {
            let info = res.data.data.user;
            this.addUnitForm = delSurplus(info, this.addUnitForm);
            let sysUserRole = res.data.data.sysUserRole;
            if (sysUserRole.dirRightList && sysUserRole.dirRightList.length > 0) {
              this.dirRightList = sysUserRole.dirRightList;
            }
            if (sysUserRole.opeRightList && sysUserRole.opeRightList.length > 0) {
              sysUserRole.opeRightList.forEach((item) => {
                if (item.type === 1) {
                  this.Box1.push(item)
                } else if (item.type === 2) {
                  this.Box2.push(item)
                } else if (item.type === 3) {
                  this.Box3.push(item)
                } else if (item.type === 4) {
                  this.Box4.push(item)
                } else if (item.type === 5) {
                  this.Box5.push(item)
                } else if (item.type === 6) {
                  this.Box6.push(item)
                } else if (item.type === 7) {
                  this.Box7.push(item)
                } else if (item.type === 8) {
                  this.Box8.push(item)
                } else if (item.type === 9) {
                  this.Box9.push(item)
                }
              })
            }
          }
        })

      }
    }
  }
</script>

<style scoped>
  .box {
    background: #fff;
    height: 100%;
  }

  .p_title {
    padding: 10px 40px 10px 20px;
    margin: 0;
  }

  .el_w {
    width: 30%;
  }

  .personalTable tr td {
    font-size: 14px;
    width: 200px;
  }

  .personalTable tr td:nth-child(1) {
    text-align: center;
  }

  .personalTable tr:nth-child(odd) {
    background: #eeeeee;
    height: 50px;
    line-height: 50px;
  }

  .personalTable tr:nth-child(even) {
    background: white;
    height: 50px;
    line-height: 50px;
  }
  span.span{
    display: inline-block;
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    padding:0 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: white;
    margin: 0 10px;
  }
  span.span1{
    font-size: 14px;
    padding:10px 20px;
    border-radius: 2px;
    margin: 0 10px;
    color: #999;
  }
</style>
